<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block class="text-blue" slot="content">{{state.autor.store.name}}</block>
		</cu-custom>
		<view class="padding flex justify-between align-center">
			<view class="flex justify-start padding">
				<view class="cu-avatar round lg">
					<image class="head-img" :src="state.autor.client.headImgUrl"></image>
					<view class="cu-tag badge"
						:class="state.autor.client.sex?'cuIcon-male bg-blue':'cuIcon-female bg-pink'"></view>
				</view>
				<view class=" text-xl padding">
					<text class="text-black text-bold">{{state.autor.client.clientName}}</text>
				</view>
			</view>
		</view>
		<view v-if="!state.autor.client.dflg" class="menu-list">
			<view @tap="toOrders" class="cu-bar">
				<view class="action">
					<text class="cuIcon-list text-blue"></text>
					<text>订单</text>
				</view>
			</view>
			<view @tap="toPerson" class="cu-bar" >
				<view class="action">
					<text class="cuIcon-peoplefill text-blue"></text>
					<text>个人设置</text>
				</view>
			</view>

			<view @tap="toVipCard" class="cu-bar">
				<view class="action">
					<text class="cuIcon-vip text-blue"></text>
					<text>开通会员</text>
				</view>
			</view>
			
			<view @tap="toVoucherAdd" class="cu-bar">
				<view class="action">
					<text class="cuIcon-card text-blue"></text>
					<text>卡券录入</text>
				</view>
			</view>
			
			<view @tap="toVip" class="cu-bar">
				<view class="action">
					<text class="cuIcon-profilefill text-blue"></text>
					<text>我的会员</text>
				</view>
			</view>

			<view @tap="toDeposits" class="cu-bar">
				<view class="action">
					<text class="cuIcon-sponsorfill text-blue"></text>
					<text>押金</text>
				</view>
			</view>
			<view @tap="toCmd()" class="cu-bar">
				<view class="action">
					<text class="cuIcon-subscription text-blue"></text>
					<text>远程开门</text>
				</view>
			</view>
			<view v-if="!state.autor.client.dflg" @tap="toQCode()" class="cu-bar">
				<view class="action">
					<text class="cuIcon-qr_code text-blue"></text>
					<text>扫码开门</text>
				</view>
			</view>
			<view  @tap="toContact" class="cu-bar">
							<view class="action">
								<text class="cuIcon-phone text-blue"></text>
								<text>联系我们</text>
							</view>
						</view>
		</view>
		<view v-else class="padding margin text-center">
			<view>
				<text class="text-red text-xxl">当前用户(ID:{{state.autor.client.clientId}})处于冻结状态</text>
			</view>
			<view>
				<text class="text-red text-xxl">请联系客服明确原因</text>
			</view>
			<view>
				<text @tap="phoneCall" class="text-blue text-xxl">联系电话：{{state.autor.store.conTel}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				state: {}
			};
		},
		onLoad: function(option) {
			this.state = this.common.getState();
			console.log(this.state.autor);
		},
		onShow:function() {
			this.state = this.common.getState();
		},
		methods: {
			phoneCall: function() {
				uni.makePhoneCall({
				    phoneNumber: this.state.autor.store.conTel //仅为示例
				});
			},
			toQCode: function() {
				console.log(this.state.autor);
				this.http.get({
					url: "/client/qCode",
					param: {
						storeId: this.state.autor.store.storeId,
						clientId: this.state.autor.client.clientId
					}
				}).then(function(res) {
					uni.navigateTo({
						url: "../pages/qCode"
					});
				}).catch(function(code) {
					if ("PAY_ORDER" === code) {
						uni.navigateTo({
							url: "../pages/orders"
						});
					} else if ("PAY_DEPOSIT" === code) {
						uni.navigateTo({
							url: "../pages/deposits"
						});
					}
				});
				
				
				
			},
			toOrders: function() {
				uni.navigateTo({
					url: "../pages/orders"
				})
			},
			toVip: function() {
				uni.navigateTo({
					url: "../pages/vip"
				})
			},
			toVipCard: function() {
				uni.navigateTo({
					url: "../pages/vipCard"
				})
			},
			toVoucherAdd: function() {
				uni.navigateTo({
					url: "../pages/voucherAdd"
				})
			},
			toPerson: function() {
				uni.navigateTo({
					url: "../pages/person"
				});
			},
			toDeposits: function() {
				uni.navigateTo({
					url: "../pages/deposits"
				});
			},
			toCmd: function() {
				uni.navigateTo({
					url: "../pages/cmd"
				});
			},
			toContact: function() {
							uni.navigateTo({
								url: "../pages/contact"
							});
						},
			formatAmount: function(amount) {
				return this.common.parseMoney(amount);
			}
		}
	}
</script>

<style scoped>
	.cuIcon-qr_code {
		border-radius: 30rpx;
	}
	
	.menu-list {

	}
	
	.menu-list > .cu-bar {
		display: inline-block;
		width: 33.33333333333333333%;
	}
	
	.menu-list > .cu-bar > .action {
		background-color: #FFF;
		display: flex;
		height: 100px;
		flex-direction: column;
		margin-top: 10px;
		border-radius: 20px;
	}
	
	.cu-bar .action:first-child>text[class*="cuIcon-"] {
		margin: 0 !important;
		font-size: 50px;
	}
</style>
